<template>
	<div>
		<div>
			<el-card>
				<div>
					<el-form class="searchForm" size="mini" label-width="100px">
						<el-form-item label="角色名称">
							<el-input
								style="width: 200px"
								v-model="searchData.roleName"
								placeholder="请输入角色名称"
							></el-input>
						</el-form-item>
						<div class="searchBtn">
							<el-button type="primary" size="small" @click="keywordSearch"><i class="el-icon-search"></i> 搜索</el-button>
							<el-button type="info" size="small" @click="clean"><i class="el-icon-delete"></i> 清空</el-button>
						</div>
					</el-form>
					<el-button type="primary" size="small" class="btn" @click="addDialogVisible = true"
						><i class="el-icon-plus"></i> 新增角色
					</el-button>
				</div>
				<div>
					<el-table
						:data="roleData"
						height="450"
						border
						style="width: 100%"
						:cell-style="{ 'text-align': 'center' }"
						:header-cell-style="{ 'text-align': 'center' }"
					>
						<el-table-column type="index" label="序号" width="50"></el-table-column>
						<el-table-column prop="roleName" label="角色名称" width="180"></el-table-column>
						<el-table-column prop="roleCode" label="角色标识"></el-table-column>
						<el-table-column prop="roleDesc" label="角色描述"></el-table-column>
						<el-table-column prop="createTime" label="创建时间"></el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-link
									type="primary"
									class="btn"
									icon="el-icon-edit"
									@click="updateRoleOpen(scope.row)"
									>编辑
								</el-link>
								<el-link type="danger" class="btn" icon="el-icon-delete" @click="removeRole(scope.row)">
									删除
								</el-link>
								<el-link type="primary" class="btn" icon="el-icon-setting" @click="roelpower(scope.row)"
									>权限
								</el-link>
							</template>
						</el-table-column>
					</el-table>

					<el-pagination
						:total="pagingData.total"
						background
						layout="total,sizes, prev, pager, next"
						:page-size="pagingData.size"
						:page-sizes="[1, 5, 10, 20, 30, 50]"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="pagingData.current"
					></el-pagination>

					<el-dialog title="添加角色" :visible.sync="addDialogVisible" width="50%">
						<el-form label-position="left" label-width="100px" size="small">
							<el-form-item label="角色名称">
								<el-input v-model="roleForm.roleName"></el-input>
							</el-form-item>
							<el-form-item label="角色标识">
								<el-input v-model="roleForm.roleCode"></el-input>
							</el-form-item>
							<el-form-item label="角色描述">
								<el-input v-model="roleForm.roleDesc"></el-input>
							</el-form-item>
						</el-form>
						<span slot="footer" class="dialog-footer">
							<el-button size="mini" @click="addDialogVisible = false">取 消</el-button>
							<el-button size="mini" type="primary" @click="addRole">确 定</el-button>
						</span>
					</el-dialog>

					<el-dialog title="编辑角色" :visible.sync="editDialogVisible" width="50%">
						<el-form :model="roleForm" label-position="left" label-width="100px" size="small">
							<el-form-item label="角色名称">
								<el-input v-model="roleForm.roleName"></el-input>
							</el-form-item>
							<el-form-item label="角色标识">
								<el-input v-model="roleForm.roleCode"></el-input>
							</el-form-item>
							<el-form-item label="角色描述">
								<el-input v-model="roleForm.roleDesc"></el-input>
							</el-form-item>
						</el-form>
						<span slot="footer" class="dialog-footer">
							<el-button size="mini" @click="editDialogVisible = false">取 消</el-button>
							<el-button size="mini" type="primary" @click="updateRole">确 定</el-button>
						</span>
					</el-dialog>

					<el-dialog title="角色权限" :visible.sync="powerDialogVisible" width="30%">
						<el-tree
							ref="tree"
							:data="menuData"
							show-checkbox
							node-key="id"
							:props="defaultProps"
							:default-checked-keys="menuIds"
						></el-tree>

						<span slot="footer" class="dialog-footer">
							<el-button size="mini" @click=";(powerDialogVisible = false), (menuIds = [])"
								>取 消</el-button
							>
							<el-button type="primary" size="mini" @click="addMenu">更 新</el-button>
						</span>
					</el-dialog>
				</div>
			</el-card>
		</div>
	</div>
</template>

<script>
import {
	findAllRole,
	addRole,
	deleteRole,
	updateRole,
	addMenu,
	findMenuByRoleId,
} from "../../../api/admin/permissions/role"
import { findAllMenu } from "../../../api/admin/permissions/menu"

export default {
	name: "role",
	data() {
		return {
			menuIds: [],
			roleData: [],
			addDialogVisible: false,
			editDialogVisible: false,
			powerDialogVisible: false,
			roleForm: {
				roleName: "",
				roleCode: "",
				roleDesc: "",
			},
			searchData: {
				roleName: "",
				roleCode: "",
			},
			// 分页数据
			pagingData: {
				current: 1,
				total: 0,
				size: 20,
			},
			menuData: [],
			// powerData 默认配置
			defaultProps: {
				children: "childrenMenus",
				label: "name",
			},
			currentRoleId: "",
		}
	},
	created() {
		this.init()
	},
	methods: {
		/**
		 * 初始化/更新 数据
		 */
		init() {
			this.keywordSearch()
			findAllMenu().then((res) => {
				this.menuData = res.data.data
			})
		},
		/**
		 * 新增角色
		 */
		addRole() {
			addRole(this.roleForm).then((res) => {
				if (res.data.code == 200) {
					this.init()
					this.addDialogVisible = false
					this.$message.success("新增角色成功")
				} else {
					this.$message.error("新增角色失败")
					this.addDialogVisible = false
				}
			})
		},
		/**
		 * 打开编辑表单
		 */
		updateRoleOpen(row) {
			this.roleForm = row
			this.editDialogVisible = true
		},
		/**
		 * 编辑角色
		 */
		updateRole() {
			updateRole(this.roleForm).then((res) => {
				if (res.data.code == 200) {
					this.init()
					this.$message.success("修改角色成功")
					this.editDialogVisible = false
				} else {
					this.$message.error("修改角色失败")
					this.editDialogVisible = false
				}
			})
		},
		/**
		 * 删除角色
		 */
		removeRole(row) {
			this.$confirm("确定要删除该租户？", "警告", {
				distinguishCancelAndClose: true,
				confirmButtonText: "确定",
				cancelButtonText: "取消",
			})
				.then(() => {
					deleteRole(row.id).then((res) => {
						if (res.data.code == 200) {
							this.init()
							this.$message.success("删除角色成功")
						} else {
							this.$message.error("删除角色失败")
						}
					})
				})
				.catch((action) => {})
		},
		/*
                关键词搜索
            */
		keywordSearch() {
			let search = {
				...this.searchData,
				total: this.pagingData.total,
				size: this.pagingData.size,
				current: this.pagingData.current,
			}
			findAllRole(search).then((res) => {
				this.pagingData.total = res.data.data.total
				this.pagingData.size = res.data.data.size
				this.pagingData.current = res.data.data.current
				this.roleData = res.data.data.records
			})
		},
		addMenu() {
			let menuIds = this.getCheckedKeys(this.menuData, this.$refs.tree.getCheckedKeys(), "id")
			let objParms = {
				roleId: this.currentRoleId,
				menuIds: menuIds,
			}
			addMenu(objParms).then((res) => {
				if (res.data.code == 200) {
					this.init()
					this.$message.success("权限更新成功")
				} else {
					this.$message.error("权限更新失败")
				}
			})
			this.powerDialogVisible = false
		},
		getCheckedKeys(data, keys, key) {
			let res = []
			recursion(data, false)
			return res
			function recursion(arr, isChild) {
				let aCheck = []
				for (let i = 0; i < arr.length; i++) {
					let obj = arr[i]
					aCheck[i] = false
					if (obj.childrenMenus) {
						aCheck[i] = recursion(obj.childrenMenus, true) ? true : aCheck[i]
						if (aCheck[i]) {
							res.push(obj[key])
						}
					}
					for (var j = 0; j < keys.length; j++) {
						if (obj[key] == keys[j]) {
							aCheck[i] = true
							if (res.indexOf(obj[key]) == -1) {
								res.push(obj[key])
							}
							break
						}
					}
				}
				if (isChild) {
					return aCheck.indexOf(true) != -1
				}
			}
		},

		// 页码切换
		handleSizeChange(val) {
			this.pagingData.size = val
			this.keywordSearch()
		},
		// 当前页切换
		handleCurrentChange(val) {
			this.pagingData.current = val
			this.keywordSearch()
		},
		roelpower(row) {
			this.menuIds = []
			this.powerDialogVisible = true
			this.currentRoleId = row.id
			findMenuByRoleId(row.id).then((res) => {
				this.menuIds = res.data.data
				this.$refs.tree.setCheckedKeys(res.data.data)
			})
		},
		/**
		 * 重置搜索框
		 */
		clean() {
			this.searchData = {}
		},
	},
}
</script>

<style scoped lang="scss">
.searchForm {
	display: flex;
	justify-content: center;

	.el-form-item {
		width: 30% !important;
		display: inline-block;
	}

	.el-input,
	.el-date-editor {
		width: 100% !important;
	}

	.searchBtn {
		margin-left: auto;
	}
}
	.btn{
		margin-bottom: 15px;
	}
</style>
